import './index.scss'
import { useState, useMemo, useEffect } from 'react'
import { useSelector } from 'react-redux'
import { NavBar, DatePicker } from 'antd-mobile'
import dayjs from 'dayjs'
import _ from 'lodash'
import classNames from 'classnames'
import Daily from './Daily'
const Month = () => {
  const [visible, setVisible] = useState(false)
  const [date, setDate] = useState(() => dayjs(new Date()).format('YYYY-MM'))
  const billList = useSelector(state => state.bill.billList)
  // useMemo相当于vue计算属性
  const monthGroup = useMemo(() => {
    return _.groupBy(billList, item => dayjs(item.date).format('YYYY-MM'))
  }, [billList])
  const handleClick = (date) => {
    const currentDate = dayjs(date).format('YYYY-MM')
    setDate(currentDate)
    setCurrentDateBill(monthGroup[currentDate] || [])
    setVisible(false)
  }
  const [ currentDateBill, setCurrentDateBill] = useState([])
  const monthResult = useMemo(() => {
    const pay = currentDateBill.filter(item => item.type === 'pay').reduce((pre, next) => pre + next.money, 0)
    const income = currentDateBill.filter(item => item.type === 'income').reduce((pre, next) => pre + next.money, 0)
    return {
      pay,
      income,
      total: pay + income
    }
  }, [currentDateBill])
  // 页面进入即显示当前月份的收支明细
  useEffect(() => {
    const currentDate = dayjs(new Date()).format('YYYY-MM')
    setCurrentDateBill(monthGroup[currentDate] || [])
  }, [monthGroup])

  // 根据当前月账单，再进行分组，获取当前月下每日的账单详情
  const dailyBill = useMemo(() => {
    const values = _.groupBy(currentDateBill, (item) => dayjs(item.date).format('YYYY-MM-DD'))
    const keys = Object.keys(values)
    return {
      values,
      keys
    }
  }, [currentDateBill])
  // 分组后，计算每天的收支明细
  // 这样写，不太优雅，分配给每个子组件去下载？
  // const dailyBillResult = useMemo(() => {
  //   let res = []
  //   for (let key in dailyBill) {
  //     let item = dailyBill[key]
  //     let pay = item.filter(day => day.type === 'pay').reduce((pre, next) => pre + next.money, 0)
  //     let income = item.filter(day => day.type === 'income').reduce((pre, next) => pre + next.money, 0)
  //     let total = pay + income
  //     res.push({
  //       pay,
  //       income,
  //       total
  //     })
  //   }
  //   return res
  // }, [dailyBill])
  return (
    <div className='monthlyBill'>
      <NavBar className="nav" backArrow={false}>
        月度收支
      </NavBar>
      <div className="content">
        <div className="header">
          {/* 时间切换区域 */}
          <div className="date" onClick={() => setVisible(true)}>
            <span className="text">
              {date}月账单
            </span>
            {/* 思路：根据当前弹框打开的状态控制expand类名是否存在 */}
            <span className={classNames('arrow', visible && 'expand')}></span>
          </div>
          {/* 统计区域 */}
          <div className='twoLineOverview'>
            <div className="item">
              <span className="money">{monthResult.pay}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{monthResult.income}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{monthResult.total}</span>
              <span className="type">结余</span>
            </div>
          </div>
          {/* 时间选择器 */}
          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="month"
            visible={visible}
            max={new Date()}
            onConfirm={handleClick}
            onClose={() => setVisible(false)}
            onCancel={() => setVisible(false)}
          />
        </div>
        {/* 当前月账单列表 */}
        {
          dailyBill.keys.map(item => <Daily billList={dailyBill.values?.[item]} date={item} key={item} />)
        }
      </div>
    </div>
  )
}

export default Month